<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-12-01 17:10:19
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <div :style="item.style || {}" :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`">
        <el-cascader
            v-if="!getTextModel"
            v-model="val"
            :props="props"
            style="width: 100%"
            :disabled="getDisabled"
            :class="{ 'placeholder-error-tip': error, 'placeholder-replace-value': item.placeholder }"
            :placeholder="error || item.placeholder || getSelectPlaceholder(item)"
            :clearable="true"
            v-bind="bindOptions"
        >
        </el-cascader>
        <div v-else :style="item.textStyle || {}" class="form-input-text g-line-1">
            {{ textModelValue || '' }}
        </div>
    </div>
</template>

<script>
import FormMixin from './mixin'
import { ManagementOfficeModel } from '@/models'
const model = new ManagementOfficeModel()

export default {
    name: 'FormAreaCascader',
    mixins: [FormMixin],
    data() {
        const _this = this
        return {
            props: {
                lazy: true,
                lazyLoad(node, resolve) {
                    const { level, value } = node
                    // 默认第1个，0层级时，也传level=1
                    const type = level + 1
                    // 级联默认为4级，省市区乡
                    const nodeLevel = _this.item.level || 4
                    model.getRegionList({ type, code: value }).then(res => {
                        const nodes = (res.list || []).map(item => ({
                            value: item.code,
                            label: item.name,
                            leaf: level >= nodeLevel - 1
                        }))
                        resolve(nodes)
                    })
                }
            }
        }
    },
    computed: {
        textModelValue() {
            if (this.item.options) {
                let val = ''
                this.item.options.forEach(item => {
                    if (item.value === this.value) {
                        val = item.label
                    }
                })
                return val
            } else {
                return this.value || ''
            }
        },
        val: {
            get() {
                return this.value
            },
            set(v) {
                this.$emit('input', v)
                this._valueLink(v)
                // 只有非子表单的情况下，才会冒泡上去数据变更
                if (this.formItemType !== 'childForm') {
                    this.statusChangeFn.valueUpdateEvent({
                        [this.item.key]: v
                    })
                } else {
                    // 如果是子表单的话，执行内置的变更
                    this.childChangeData.valueUpdateEvent()
                }
            }
        }
    }
}
</script>

<style scoped>
/* 用placeholder代替回显 */
.placeholder-replace-value ::v-deep input::-webkit-input-placeholder {
    color: #44444f;
}
</style>
